<%--
  Created by IntelliJ IDEA.
  User: jiangzhenzhen
  Date: 2018/7/18
  Time: 15:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="${assets}/css/views/lib/multiple-select.css" />
    <link rel="stylesheet" href="${newframe}/css/base/base.css">
    <link rel="stylesheet" href="${assets}/css/views/layout.css">

    <%--<link rel="stylesheet" href="${assets}/css/views/index/index.css"/></head>--%>
    <style>
        label{
            font-family: MicrosoftYaHeiLight;
            font-size: 11px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #ffffff;
            text-align:center !important;
            display:inline-block;
            word-wrap: break-word;
            width:100%;
        }
        .bpNum,.bsNum,.bp60Num,.bs60Num{
            cursor:pointer;
        }
        .slite b:hover{
            text-decoration:underline;
            color:#35acfd;
        }
    </style>
<body>
<div class="layoutWrapper serviceStation">
    <div class="floor1 floor">
        <div class="abnormalRemind">
            <h1>异常数据提醒（近一周数据）</h1>
            <div class="abnormalBloodPressure">
                <div class="bloodPressureData">
                    <div class="pic">
                        <img src="${assets}/images/bloodPressure.png" alt="">
                    </div>
                    <div class="data">
                        <h2>血压异常</h2>
                        <p>
                            <b v-if="bpTestNum == null || bpTestNum == '' ">0</b>
                            <b v-else="bpTestNum != null" v-text="bpTestNum"></b>&nbsp;&nbsp;位
                        </p>
                    </div>
                </div>
                <div class="exceptionDetail">
                    血压异常:&nbsp;收缩压≥140mmHg舒张压≥90mmHg,血压低于90/60mmHg
                </div>
            </div>
            <div class="abnormalBloodSugar">
                <div class="bloodSugarData">
                    <div class="pic">
                        <img src="${assets}/images/bloodSugar.png" alt="">
                    </div>
                    <div class="data">
                        <div class="data">
                            <h2>血糖异常</h2>
                            <p>
                                <b v-if="bsTestNum == null || bsTestNum == '' ">0</b>
                                <b v-else="bsTestNum != null" v-text="bsTestNum"></b>&nbsp;&nbsp;位
                            </p>
                        </div>
                    </div>
                </div>
                <div class="exceptionDetail">
                    血糖异常:&nbsp;空腹血糖  ≥ 6.7mmol/L餐后两个小时的血糖≥7.8mmol/L
                </div>
            </div>
        </div>
        <div class="departmentUsed">
            <h1>设备使用情况</h1>
            <div class="departmentData">
                <ul>
                    <li data-index="0" :class="{'active':0 == navActive}" @click="cal($event,5,'unUse5')">5天</li>
                    <li data-index="1" :class="{'active':1 == navActive}" @click="cal($event,10,'unUse10')">10天</li>
                    <li data-index="2" :class="{'active':2 == navActive}" @click="cal($event,15,'unUse15')">15天</li>
                </ul>
                <div class="quatity">
                    <img src="${assets}/images/department.png" alt="">
                    <div class="data">

                        <p v-if="num == 5"><b v-text="unUseTotal5"></b>台</p>
                        <p v-else-if="num == 10"><b v-text="unUseTotal10"></b>台</p>
                        <p v-else="num == 15"><b v-text="unUseTotal15"></b>台</p>
                        <h2>未使用设备</h2>
                    </div>
                </div>
                <div class="cumulativeTimes">
                    累计使用
                    <b v-if="num == 5" v-text="useTimes5">100</b>
                    <b v-else-if="num == 10" v-text="useTimes10">100</b>
                    <b v-else="num == 15" v-text="useTimes15">100</b>
                    次
                </div>
            </div>
        </div>
        <div class="servicePeople">
            <div class="title">
                <p>服务站</p>
                <p>服务站总人数</p>
            </div>
            <h4 class="num" v-text="totalPeopleNum"></h4>
        </div>
    </div>
    <div class="floor2 floor" style="display:none">
        <div class="serviceStatistics">
            <h1>服务统计数据</h1>
            <div class="searchInput">
                <%--<label for="hospital">医院名称</label>--%>
                <%--<div id="hospital"></div>--%>
                <%--<select id="hospital" name="hospital"></select>--%>
                <%--<div class="form-group" style="height:300px;">--%>
                <label for="hospital">医院名称</label>
                <select id="hospital" multiple="multiple" >
                    <option v-for="(item,index) in selectList" :value="item.patientTotal" v-text="item.text" selected = "selected"></option>
                </select>
                <%--</div>--%>
                <button class="search">搜索</button>
            </div>
            <div class="serviceChart">
                <div id="serviceBar"></div>
            </div>
        </div>
    </div>
    <div class="floor floor3">
        <div class="stastics">
            <div class="stasticsModules">
                <div class="bloodPressure">
                    <div class="moduleDetail">
                        <div class="decribes slite">
                            <h3>高血压</h3>
                            <p><b class="bpNum"></b>位</p>
                        </div>
                        <img src="${assets}/images/bloodPressureBlue.png" alt="">
                    </div>
                </div>
                <div class="diabetes">
                    <div class="moduleDetail">
                        <div class="decribes slite">
                            <h3>糖尿病</h3>
                            <p><b class="bsNum"></b>位</p>
                        </div>
                        <img src="${assets}/images/dibetes.png" alt="">
                    </div>
                </div>
                <div class="over60">
                    <div class="moduleDetail">
                        <div class="decribes slite">
                            <h3>60岁以上人群</h3>
                            <p>高血压<b class="bp60Num"></b>位</p>
                            <p>糖尿病<b class="bs60Num"></b>位</p>
                        </div>
                        <img src="${assets}/images/bloodPressureBlue.png" alt="">
                    </div>
                </div>
                <div class="sex">
                    <div class="moduleDetail">
                        <div class="decribes">
                            <h3>性别</h3>
                            <p>男<b class="manNum"></b>位</p>
                            <p>女<b class="womanNum"></b>位</p>
                        </div>
                        <img src="${assets}/images/sex.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="bloodPressureStatistics">
            <h1>血压统计</h1>
            <div class="pic">
                <div class="toolDetail">
                    <span class="title">血压测试人数</span>
                    <span class="detail"><a href="#" onClick="window.parent.showSrc('${URL_INDEX_BPABNORMAL}')">查看详情>></a></span>
                </div>
                <div id="bloodPressurePie"></div>
            </div>

        </div>
    </div>
    <div class="floor2 floor floor4">
        <div class="serviceStatistics">
            <h1 style="marginBottom:19px;">异常年龄段分布</h1>
            <div class="serviceChart">
                <div id="abnormalAge"></div>

            </div>
        </div>
    </div>
    <div class="floor floor3 floor5">
        <div class="bloodPressureStatistics">
            <h1>血糖统计</h1>
            <div class="pic">
                <div class="toolDetail">
                    <span class="title">空腹血糖测试人数"</span>
                    <span class="detail"><a href="#" onClick="window.parent.showSrc('${URL_INDEX_BSABNORMAL}')">查看详情>></a></span>
                </div>
                <div id="bloodSugarPie"></div>
            </div>

        </div>
        <div class="bloodPressureStatistics">
            <h1>血糖统计</h1>
            <div class="pic">
                <div class="toolDetail">
                    <span class="title">餐后2小时血糖测试人数</span>
                    <span class="detail"><a href="#" onClick="window.parent.showSrc('${URL_INDEX_BSABNORMAL}')">查看详情>></a></span>
                </div>
                <div id="AfterBloodSugarPie"></div>
            </div>

        </div>
    </div>
    <div class="floor2 floor floor6">
        <div class="serviceStatistics">
            <h1 style="marginBottom:19px;">异常年龄段分布</h1>
            <div class="serviceChart">
                <div id="abnormalSugarAge"></div>

            </div>
        </div>
    </div>


</div>

<script src="${assets}/js/jquery.min.js" type="text/javascript"></script>
<script src="${assets}/js/views/lib/multiple-select.js"></script>
<script src="${assets}/plugins/echarts/echarts.min.js" type="text/javascript"></script>
<script src="${newframe}/js/select2.full.zh.js"></script>
<script src="${newframe}/js/select2.full.js"></script>
<script src="${assets}/js/views/vue.min.js"></script>
<script src="${assets}/js/views/floor.js"></script>
<script src="${assets}/js/views/layout.js"></script>


<script type="text/javascript">

    $(function() {
        selectText = $('#hospital').multipleSelect('getSelects','text');
        selectValue = $('#hospital').multipleSelect('getSelects','value');

        initBar("serviceBar",selectText,selectValue,'服务人员（人）');

        $('.search').click(function(){
            var selectValue = [];
            selectText = $('#hospital').multipleSelect('getSelects','text');
            selectValue = $('#hospital').multipleSelect('getSelects','value');
            initBar("serviceBar",selectText,selectValue);

        })

    });
    // 高血压
    $('.bpNum').on('click',function(){
        // 获取当前url地址
        console.log(window.href)
    })

</script>

</body>
</html>
